<template>
  <el-dialog
    width="80%"
    :title="'新增处方'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
  <div class="choose-prescription">
    <!-- <div style="margin-bottom:20px"><span style="font-size:18px">{{name}}</span><span style="font-size:18px">{{school}}</span><span style="font-size:18px">{{grade}}</span><span style="font-size:18px">{{class1}}</span></div> -->
    <div style="margin-bottom:20px"></div>
    <div class="choose-tit">选择处方</div>
    <div class="all-prescription"
      v-for="(item, i) in dataForm.dynamicPrescriptions"
      :key="i">
      <div class="cons-item">
        <div class="main-item">
          <div class="m-header">方案{{toChinese(i+1)}}</div>
          <div class="con">
            <div class="name">
              <span>运动目标</span>
              <span class="name-str">{{item.spotTarget}}</span>
            </div>
            <div class="remark">
              <div class="rmk-tit">注意事项</div>
              <div class="desc">
                {{item.note}}
                <!-- （1）所有动作需要在保证安全的前提下保证质量，避免运动损伤。
                （2）锻炼前进行10～15min热身和准备活动。
                （3）锻炼后进行10～15min静态牵拉和整理活动。
                （4）注意循序渐进，根据身体适应情况调整强度和难度。
                （5）注意合理饮食，合理补充营养。多吃水果、蔬菜和富含蛋白质的食物。
                （6）合理安排作息时间和生活方式，日常生活要有规律。-->
              </div>
              <div class="rmk-tit">热身活动</div>
              <div class="desc">
                {{item.warmUp}} 
               <!--  热身活动：5分钟 
                热身内容： 
                1.头部运动 
                2.扩胸振臂运动 
                3.转体运动 
                4.腕踝关节 
                5.直⽴压腿 
                6.⼸步压腿-->
              </div>
              <div class="rmk-tit">整理活动</div>
              <div class="desc">
                 {{item.arrange}}
               <!-- 放松活动：5分钟 
                放松内容： 
                1.左右颈部拉伸 
                2.站姿肩、臂后侧拉伸 
                3.姿左右侧背拉伸 
                4.站姿⼤腿前侧拉伸 
                5.屈膝⼩腿后侧拉伸 -->
              </div>
            </div>
          </div>
          <div class="btns">
            <el-button class="choose-btn" v-on:click="dataForm.dynamicPrescriptionIndex = i">选择该方案</el-button>
          </div>
        </div>
        <div class="item-response">
            <div class="sub-items">
              <div class="sub-item" 
              v-for="(gsonItem, i0) in item.prescription"
              :key="i0">
                <div class="s-header">
                  <span>第{{toChinese(i0+1)}}天</span>
                  <span class="total-week">共{{toChinese(item.prescription.length)}}天</span>
                </div>
                <div class="childrens">
                    <div class="child-item"  v-for="(detailItem, iu) in gsonItem.prescriptionDetail"
                    :key="iu">
                        <div class="con">
                            <div class="icon-row">
                                <div class="str-box">
                                <span class="name">运动项目</span>
                                <span class="name-str">{{detailItem.sportCode}}</span>
                                </div>
                            </div>
                            <div class="desc-items">
                                <div class="field">
                                <span class="label">运动强度</span>
                                <span class="val">高</span>
                                </div>
                                <div class="field">
                                <span class="label">运动时长（分钟）</span>
                                <span class="val">{{detailItem.sportDuration/60}}</span>
                                </div>
                                <div class="field">
                                <span class="label">每次个数（个）</span>
                                <span class="val">{{detailItem.times}}</span>
                                </div>
                                <!--<div class="field">
                                <span class="label">每周频率（次/周）</span>
                                <span class="val">{{gsonItem.Frequency}}</span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>

  <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="visible = false"
      >取消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        :disabled="this.dataForm.dynamicPrescriptions.length===0"
        @click="dataFormSubmit()"
      >确定</el-button>
    </span>
    <perscription-exceptions-confirm
      v-if="perscriptionExceptionsConfirmVisible"
      ref="perscriptionExceptionsConfirm"
      @close="editClose"
      @success="editSuccess"
    />
  </el-dialog>
</template>

<script>
import perscriptionExceptionsConfirm from './perscriptionExceptions-confirm'
  export default {
  components: { perscriptionExceptionsConfirm },
    data () {
      return {
        text: "123",
        visible: false,
        loading: false,
        dataList: [],
        dataListLoading: false,
        perscriptionExceptionsConfirmVisible: false,
        school: "延安中学",
        name: "高胤晗",
        grade: "高二",
        class1: "（9）班",
        dataForm: {
          dynamicPrescriptions: [
            // {
            //     "arrange": "（1）所有动作需要在保证安全的前提下保证质量，避免运动损伤。（2）锻炼前进行10～15min热身和准备活动。（3）锻炼后进行10～15min静态牵拉和整理活动。（4）注意循序渐进，根据身体适应情况调整强度和难度。（5）注意合理饮食，合理补充营养。多吃水果、蔬菜和富含蛋白质的食物。（6）合理安排作息时间和生活方式，日常生活要有规律。",
            //     "warmUp": "热身活动：5分钟 热身内容： 1.头部运动 2.扩胸振臂运动 3.转体运动 4.腕踝关节 5.直⽴压腿 6.⼸步压腿",
            //     "note": "放松活动：5分钟 放松内容： 1.左右颈部拉伸 2.站姿肩、臂后侧拉伸 3.姿左右侧背拉伸 4.站姿⼤腿前侧拉伸 5.屈膝⼩腿后侧拉伸",
            //     "spotTarget": "减轻体重，增强肌⼒；提⾼⼼肺耐⼒； 改善体质",
            //     "sortIndex": "1",
            //     "isChoose": "1",
            //     "prescription": [{
            //       "PrescriptionDetail": [{
            //         "sportCode": "跳绳",
            //         "sortIndex": "1",
            //         "times": "60",
            //         "sportDuration": "60",
            //         "restDuration": "60",
            //         "repeatTimes": "5",
            //         "lowRate": "15",
            //         "highRate": "30"
            //       }, {
            //         "sportCode": "深蹲",
            //         "sortIndex": "2",
            //         "times": "60",
            //         "sportDuration": "60",
            //         "restDuration": "60",
            //         "repeatTimes": "5",
            //         "lowRate": "15",
            //         "highRate": "30"
            //       }]
            //     },{
            //       "PrescriptionDetail": [{
            //         "sportCode": "平板⽀撑1",
            //         "sortIndex": "1",
            //         "times": "60",
            //         "sportDuration": "60",
            //         "restDuration": "60",
            //         "repeatTimes": "5",
            //         "lowRate": "15",
            //         "highRate": "30"
            //       }, {
            //         "sportCode": "平板⽀撑2",
            //         "sortIndex": "2",
            //         "times": "60",
            //         "sportDuration": "60",
            //         "restDuration": "60",
            //         "repeatTimes": "5",
            //         "lowRate": "15",
            //         "highRate": "30"
            //       }]
            //     }]
            //   }, {                
            //     "arrange": "（1）所有动作需要在保证安全的前提下保证质量，避免运动损伤。（2）锻炼前进行10～15min热身和准备活动。（3）锻炼后进行10～15min静态牵拉和整理活动。（4）注意循序渐进，根据身体适应情况调整强度和难度。（5）注意合理饮食，合理补充营养。多吃水果、蔬菜和富含蛋白质的食物。（6）合理安排作息时间和生活方式，日常生活要有规律。",
            //     "warmUp": "热身活动：5分钟 热身内容： 1.头部运动 2.扩胸振臂运动 3.转体运动 4.腕踝关节 5.直⽴压腿 6.⼸步压腿",
            //     "note": "放松活动：5分钟 放松内容： 1.左右颈部拉伸 2.站姿肩、臂后侧拉伸 3.姿左右侧背拉伸 4.站姿⼤腿前侧拉伸 5.屈膝⼩腿后侧拉伸",
            //     "spotTarget": "减轻体重，增强肌⼒；提⾼⼼肺耐⼒； 改善体质",
            //     "sortIndex": "1",
            //     "isChoose": "0",
            //     "prescription": [{
            //       "PrescriptionDetail": [{
            //         "sportCode": "平板⽀撑",
            //         "sortIndex": "1",
            //         "times": "60",
            //         "sportDuration": "60",
            //         "restDuration": "60",
            //         "repeatTimes": "5",
            //         "lowRate": "15",
            //         "highRate": "30"
            //       }, {
            //         "sportCode": "俯卧撑",
            //         "sortIndex": "2",
            //         "times": "60",
            //         "sportDuration": "60",
            //         "restDuration": "60",
            //         "repeatTimes": "5",
            //         "lowRate": "15",
            //         "highRate": "30"
            //       }]
            //     }]
            //   }
              ],
          dynamicPrescriptionIndex: -1
        },
        sels: []
      }
    },
    methods: {
      init () {
        this.visible = true
        /* var x = this.dataForm.dynamicPrescriptions.pop();
        var that = this;
        setTimeout(function(){
          that.dataForm.dynamicPrescriptions.push(x);
        }, 2000) */
        this.$http({
          url: this.$http.requestUrl('/sport/prescriptionapi/v1/query/api'),
          method: 'post',
          /* params: this.$http.requestParams() */
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.dynamicPrescriptions = JSON.parse(data.info);
          }
        })
      },
      transformDate(data) {
        data =  JSON.parse(data.info);
        var newData = [];
        this.school = data.school;
        this.name = data.name;
        this.grade = data.grade;
        this.class1 = data.class;
        var prescriptions = data.SportPrescription;
        for(var i in prescriptions) {
          var item = prescriptions[i];
          var newItem = {
            SportType: item.SportType,
            SportTypeName: item.SportTypeName,
            SportTarget: data.SportTarget,
            SportTargetName: data.SportTargetName,
            note: item.note,
            SportPrescription: item.Options
          };
          newData.push(newItem);
        }
        return newData;
      },
      selsChange (sels) {
        this.sels = sels
      },
      editClose() {
        this.visible = false
        this.$emit('close')
      },
      editSuccess() {
        this.visible = false
        this.$emit('success')
      },
      dataFormSubmit () {
        if (this.dataForm.dynamicPrescriptionIndex == -1) {
            this.$message({
              message: '请选择一个方案',
            })
            return
        }
        for(var i in this.dataForm.dynamicPrescriptions) {
          if(this.dataForm.dynamicPrescriptionIndex == i) {
            this.dataForm.dynamicPrescriptions[i].choose = '1';
          } else {
            this.dataForm.dynamicPrescriptions[i].choose = '0';
          }
        }
        this.perscriptionExceptionsConfirmVisible = true
        this.$nextTick(() => {
          this.$refs.perscriptionExceptionsConfirm.init(this.dataForm)
        })
        /*this.$http({
          url: this.$http.requestUrl('/sport/prescriptionapi/save/api'),
          method: 'post',
          data: JSON.stringify(this.dataForm.dynamicPrescriptions)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
              }
            })
          }
        })*/
        /* var sportProject = this.sels.map(item => item.sportProject).toString()
        var sportDuration = this.sels.map(item => item.sportDuration).toString()
        var sportFrequency = this.sels.map(item => item.sportFrequency).toString()
        var sportIntensity = this.sels.map(item => item.sportIntensity).toString()
        this.perscriptionExceptionsConfirmVisible = true
        this.$nextTick(() => {
          this.$refs.perscriptionExceptionsConfirm.init(sportProject, sportDuration, sportFrequency, sportIntensity)
        }) */
      },
      getDataList (isReload) {
        console.log(isReload)
        this.$parent.getDataList(isReload)
      },
      closeByChild() {
        console.log('close parent')
        this.visible = false
        this.$emit('close')
      },
      toChinese(num) {
        let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
        let unit = ["", "十", "百", "千", "万"];
        num = parseInt(num);
        let getWan = (temp) => {
          let strArr = temp.toString().split("").reverse();
          let newNum = "";
          for (var i = 0; i < strArr.length; i++) {
            newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
          }
           return newNum;
      }
      let overWan = Math.floor(num / 10000);
      let noWan = num % 10000;
      if (noWan.toString().length < 4) {  noWan = "0" + noWan;   }
      return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
      }
    }
  }
</script>


<style scoped lang="scss">
.choose-prescription {
  background: #dbf3ed;
  padding: 40px;
  .choose-tit {
    font-size: 24px;
    color: #2f5a54;
    font-weight: 500;
    margin-bottom: 48px;
  }
  .all-prescription {
    .cons-item {
      margin-bottom:36px;
      display: flex;
      background: #edfdf9;
      border-radius: 25px;
      box-sizing: border-box;
      height: 402px;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
      width:max-content;
      .main-item {
        min-width: 323px;
        width: 323px;
        min-height: 414px;
        background: #edfdf9;
        border-radius: 25px 25px 0px 0px;
        border-bottom-left-radius: 25px;
        box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
        position: relative;
        overflow: hidden;
        margin-right: 50px;
        top: -12px;
        .m-header {
          background: linear-gradient(49deg, #4dbdae 0%, #4dbdae 100%);
          line-height: 70px;
          text-align: center;
          font-size: 24px;
          color: #ffffff;
        }
        .con {
          padding: 20px;
          box-sizing: border-box;
          .name {
            font-size: 18px;
            color: #2f5a54;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name-str {
              font-size: 20px;
              color: #2f5a54;
              font-weight: 600;
            }
          }
        }
        .remark {
          max-height: 200px;
          overflow-y: auto;
          margin-top:10px;
          .rmk-tit {
            color: #2f5a54;
            font-size: 18px;
            font-weight: 500;
            margin: 22px 0px;
          }
          .desc {
            background: #dbf3ed;
            font-size: 16px;
            font-size: 14px;
            color: #2f5a54;
            line-height: 26px;
            padding: 10px;
            border-radius: 10px;
            box-sizing: border-box;
            
            // max-height: 126px;
            // overflow-y: auto;
          }
        }
        .btns {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .choose-btn {
            border-color: #4dbdae;
            background: #4dbdae;
            box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
            color: #fff;
            border-radius: 10px;
          }
        }
      }
      .item-response{
        max-width:916px;
        overflow-y:hidden;
        .sub-items{
          display:inline-flex;
        }
      }
      .sub-items {
        display: flex;
        padding: 27px;
        padding-left:0px;
        .sub-item {
          margin-right: 20px;
          min-width: 283px;
          .s-header {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 56px;
            background: #659eed;
            border-radius: 10px;
            padding: 0px 25px;
            font-size: 16px;
            margin-bottom: 25px;
          }
          .childrens{
              display: flex;
              align-items: center;
              .child-item{
                  min-width:283px;
                  margin-right:20px;
              }
              .child-item:last-child{
                  margin-right:0px;
              }
          }
          .second-bg {
            background: #f3af5c;
          }
          .third-bg {
            background: #fb8885;
          }
          .con {
            background: #dbf3ed;
            border-radius: 10px;
            overflow: hidden;
            .icon-row {
              background-color: #bee5db;
              line-height: 102px;
              height: 102px;
              background-image: url("../../../assets/img/motion_icon.png");
              background-repeat: no-repeat;
              background-size: 56px 56px;
              background-position: 10%;
              display: flex;
              align-items: center;
              .str-box {
                margin-left: 100px;
              }
              .name {
                font-size: 18px;
                color: #2f5a54;
                display: block;
                line-height: 30px;
              }
              .name-str {
                font-size: 24px;
                color: #2f5a54;
                font-weight: 500;
                line-height: 30px;
                display: block;
              }
            }
            .desc-items {
              font-size: 16px;
              color: #2f5a54;
              padding: 0px 24px 24px 24px;
              .field {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                line-height: 18px;
                .label {
                }
                .val {
                  font-size: 18px;
                  color: #2f5a54;
                  font-weight: 500;
                }
              }
            }
          }
        }
        .sub-item:last-child{
          margin-right:0px;
        }
      }
    }
  }
}
</style>